﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Swiper中文网基础演示(www.swiper.com.cn)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="css/swiper.min.css">
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/swiper.min.js"></script>
<style>
* {
	margin:0;
	padding:0;
}
#header {
	position:absolute;
	left:0;
	top:0;
	z-index:999;
	width:100%;
	height:43px;
	overflow:hidden;
	background:#fdfdfc;
	font:12px/40px hiragino sans gb,microsoft yahei,simsun;
	box-shadow:3px 3px 3px rgba(0,0,0,0.2);
}
#top-line {
	width:100%;
	height:3px;
	line-height:0;
	font-size:0;
	overflow:hidden;
	text-align:center;
	z-index:1;
	background-color:#0fa6ea;
	background:-webkit-linear-gradient(left,rgba(15,166,234,1) 0,rgba(89,204,24,1) 10%,rgba(15,166,234,1) 60%,rgba(15,166,234,1) 100%);
	background:-moz-linear-gradient(left,rgba(15,166,234,1) 0,rgba(89,204,24,1) 10%,rgba(15,166,234,1) 60%,rgba(15,166,234,1) 100%);
	background:-ms-linear-gradient(left,rgba(15,166,234,1) 0,rgba(89,204,24,1) 10%,rgba(15,166,234,1) 60%,rgba(15,166,234,1) 100%);
	background:linear-gradient(left,rgba(15,166,234,1) 0,rgba(89,204,24,1) 10%,rgba(15,166,234,1) 60%,rgba(15,166,234,1) 100%);
}
#header .swiper-slide {
	padding:0 20px;
	width:auto;
}
#banner {
	width:100%;
	overflow:hidden;
	margin-top:43px;
	position:relative;
}
#banner .swiper-slide {
	position:relative;
	text-align:center;
}
#banner img {
	max-width:100%;
	display:block;
}
#banner h2 {
	text-align:center;
	font-size:1em;
	height:42px;
	line-height:42px;
	color:#fafafa;
	position:absolute;
	left:0;
	bottom:0;
	right:0;
	font-weight:normal;
	text-shadow:1px 1px 1px #000;
	/* background-color:rgba(21,20,20,0.5);*/
    background-color:rgba(0,0,0,0);
	background:-moz-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.7));
	background:-webkit-gradient(linear,top,from(rgba(0,0,0,0)),to(rgba(0,0,0,0.7)));
	background:-webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.7));
	background:-o-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.7));
}
#banner .pagination {
	position:absolute;
	z-index:20;
	bottom:3px;
	text-align:center;
	right:0;
}
#banner .swiper-pagination-bullet {
	display:inline-block;
	width:5px;
	height:5px;
	border-radius:5px;
	background:#fff;
	margin:0 2px;
	opacity:0.8;
	cursor:pointer;
}
#banner .swiper-pagination-bullet-active {
	background:#ff6600;
}
#announcement {
	height:2em;
	background:#f5f8fc;
	border:1px solid #d2e1f1;
	margin:0.5em;
}
#announcement a {
	color:#294c7f;
	text-decoration:none;
	display:block;
	line-height:2;
	height:2em;
	text-indent:0.5em;
	overflow:hidden;
}
#tabs-container {
	height:400px;
}
.tabs {
	border-top:2px solid #9ac7ed;
	background:url(images/headbg.png) no-repeat left top #f9fafa;
	background-size:auto 100%;
	width:100%;
	height:38px;
	overflow:hidden;
}
.tabs a {
	font-weight:normal;
	text-align:center;
	float:left;
	width:64px;
	height:38px;
	line-height:38px;
	color:#2a70be;
	text-decoration:none;
}
.tabs a.active {
	border-top:2px solid #2a70be;
	margin-top:-2px;
	background-image:url(images/tab_ui.png);
	background-repeat:no-repeat;
	-webkit-background-size:64px 39px;
	-moz-background-size:64px 39px;
	-o-background-size:64px 39px;
	background-size:64px 39px;
	background-position:left top;
	color:#c14545;
}
.news-list {
	padding:0 10px;
}
.news-list li {
	overflow:hidden;
	border-bottom:1px solid #eceef0;
	box-shadow:0 1px 1px #fff;
	font-weight:normal;
	height:35px;
	line-height:35px;
	font-size:80%;
}

</style>
</head>
<body>
<div id="header">
  <div id="top-line"></div>
  <div class="swiper-wrapper">
    <div class="swiper-slide">新闻</div>
    <div class="swiper-slide">财经</div>
    <div class="swiper-slide">娱乐</div>
    <div class="swiper-slide">体育</div>
    <div class="swiper-slide">订阅</div>
    <div class="swiper-slide">微博</div>
    <div class="swiper-slide">空间</div>
    <div class="swiper-slide">书城</div></div>
</div>
<div id="banner" class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="images/0.jpg?v=sf" />
      <h2>贾乃亮发长文默认李小璐出轨</h2></div>
    <div class="swiper-slide">
      <img src="images/1.jpg?v=wf" />
      <h2>阿里程序员穿特步相亲被拒绝</h2></div>
  </div>
  <div class="pagination"></div>
</div>
<div id="announcement" class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <a href="#">女博士相亲角被嘲？其实是有“预谋”的行为艺术</a></div>
    <div class="swiper-slide">
      <a href="#">你为什么还没过上你想要的生活</a></div>
    <div class="swiper-slide">
      <a href="#">莲花粉橙色也太美了！连直男都爱的仙女色！</a></div>
  </div>
</div>

<div class="tabs">
  <a href="#" class="active">新闻</a>
  <a href="#">社会</a>
  <a href="#">娱乐</a>
</div>
<div id="tabs-container" class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <ul class="news-list">
        <li>女子强行阻拦高铁发车 称其丈夫没上车</li>
        <li>小马奔腾创始人妻子被判赔2亿债务</li>
        <li>杭州女子将200平荒地改造成“秘密花园”</li>
        <li>“紫光阁饭店”事件，乌龙背后是热搜的生意</li>
        <li>最美乘务员冒雪挨个扶旅客下火车</li>
        <li>五月天周杰伦再度合体</li>
        <li>张馨予被赞模特身材</li>
        <li>惊呆，杨紫的脸现在跟脖子一样宽了！</li>
        <li>睡姿暴露你偷情指数</li>
        <li>济南小伙儿自掏腰包，为陌生农民工加菜</li></ul>
    </div>
    <div class="swiper-slide">
      <ul class="news-list">
        <li>女子街边卖早餐卖蓝色油条生意火爆</li>
        <li>保定励志哥！坐着轮椅唱歌成网红</li>
        <li>电影院保安恋上女研究生</li>
        <li>19岁女生保送北大直博</li>
        <li>男子越狱期间强奸女友12岁的女儿</li>
        <li>8旬爷爷因三个孩子都不赡养</li>
        <li>7座面包车塞进20名学生</li>
        <li>老人做家务时羽绒服突然“爆炸”</li>
        <li>直播间里，用歌舞抗癌的70岁“网红”</li>
        <li>PG_ONE粉丝买热搜"紫光阁地沟油"</li></ul>
    </div>
    <div class="swiper-slide">
      <ul class="news-list">
        <li>“绿帽门”后贾乃亮深夜买醉</li>
        <li>姚笛大方挥手无名指戒指抢眼</li>
        <li>汪小菲被大S减肥成果吓到</li>
        <li>Baby和秀智同穿18万仙女裙</li>
        <li>易烊千玺得罪粉丝？接机时粉丝不想理他</li>
        <li>Tara成员：送了跑车还有90亿</li>
        <li>蒋欣在节目上的表情超有戏</li>
        <li>李小璐最新写真曝光，大走稳重的知性风</li>
        <li>马思纯和欧豪穿同款秀恩爱</li>
        <li>第90届奥斯卡颁奖礼发海报</li></ul>
    </div>
  </div>
</div>
<script type="text/javascript">
window.onload = function() {
    var navSwiper = new Swiper('#header', {
        freeMode: true,
        slidesPerView: 'auto',
        freeModeSticky: true,
    });
	
    var bannerSwiper = new Swiper('#banner', {
        autoplay: 5000,
        visibilityFullFit: true,
        loop: true,
        pagination: {
            el: '#banner .pagination',
        }
    });

    var announcementSwiper = new Swiper('#announcement', {
        direction: 'vertical',
		loop: true,
        autoplay: {
            delay: 3000,
            disableOnInteraction: false,
        }
    })

    var tabsSwiper = new Swiper('#tabs-container', {
        speed: 500,
        on: {
            slideChangeTransitionStart: function() {
                $(".tabs .active").removeClass('active');
                $(".tabs a").eq(this.activeIndex).addClass('active');
            }
        }
    })
    $(".tabs a").on('click', function(e) {
        e.preventDefault()
        $(".tabs .active").removeClass('active')
        $(this).addClass('active')
        tabsSwiper.slideTo($(this).index())
    })
}
</script>
</body>
</html>
